:root {
  --primary-light: #e9e9e9;
  --primary-dark: #201030;
  --primary-dim: #c9adef;

  --background-light: #f5f5f5;
  --background-dark: #100020;

  --content-light: #100020;
  --content-dark: #f5f5f5;

  /* bg short for background */
  --icon-bg-light: rgba(0, 0, 0, 0.1);
  --icon-bg-dark: rgba(255, 255, 255, 0.1);
  --icon-bg-light-hover: rgba(0, 0, 0, 0.2);
  --icon-bg-dark-hover: rgba(255, 255, 255, 0.2);
  --icon-bg-light-active: rgba(0, 0, 0, 0.5);
  --icon-bg-dark-active: rgba(255, 255, 255, 0.3);

  --darkgrey: #d4d4d4;
  --medgrey: #e0e0e0;
  --grey: #f7f7f7;
  --white: #fff;

  --xs: 4px;
  --s: 8px;
  --m: 16px;
  --l: 24px;
}

.u-flex {
  display: flex;
}

.u-flexColumn {
  display: flex;
  flex-direction: column;
}

.u-flex-justifyCenter {
  justify-content: center;
}

.u-flex-alignCenter {
  align-items: center;
}

.u-inlineBlock {
  display: inline-block;
}

.u-bold {
  font-weight: 600;
}

.u-textCenter {
  text-align: center;
}

.u-relative {
  position: relative;
}

.u-pointer {
  cursor: pointer;
}

.u-link {
  color: var(--primary-light);
  text-decoration: none;
  cursor: pointer;
}

.u-link:hover {
  color: var(--primary-dim);
}

.u-button {
  color: inherit;
  font-size: large;
  font-weight: 500;
  background-color: var(--icon-bg-light);
  border-radius: 18px 18px 18px 18px;
  line-height: 36px;
  border: none;
  transition-duration: 0.3s;
  cursor: pointer;
  text-align: center;
  padding-left: var(--s);
  padding-right: var(--s);
}

.u-button:hover {
  transition-duration: 0s;
  background-color: var(--icon-bg-light-hover);
}

.u-button:active {
  transition-duration: 0s;
  background-color: var(--icon-bg-light-active);
}

@media (prefers-color-scheme: dark) {

  /* dark mode */
  .u-button {
    background-color: var(--icon-bg-dark);
    color: var(--content-dark);
  }

  .u-button:hover {
    background-color: var(--icon-bg-dark-hover);
  }

  .u-button:active {
    background-color: var(--icon-bg-dark-active);
  }
}
